<template>
    <div>
        <a-modal v-model="show" :title="form.id?'编辑':'新增'" @ok="handleOk" @cancel="show = false">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-item label="表格名称">
                    <a-input v-model="form.tableName" />
                </a-form-item>
                <a-form-item label="表格描述">
                    <a-input v-model="form.tableTitle" />
                </a-form-item>
                <a-form-item label="附件url ">
                    <a-upload name="file" :multiple="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
                        <a-button>
                            <a-icon type="upload" /> Click to Upload
                        </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="适用组织">
                    <a-select v-model="form.orgIds" placeholder="选择组织" mode="multiple">
                        <a-select-option :value="item.orgId" v-for="(item,index) in orgList" :key="index">
                            {{item.orgName}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="表格状态">
                    <a-select v-model="form.tableStatus" placeholder="选择状态">
                        <a-select-option :value="item.value" v-for="(item,index) in statusList" :key="index">
                            {{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="表格类型">
                    <a-input placeholder="请填写表格类型" type="number" v-model="form.tableType"></a-input>
                </a-form-item>
                <a-form-item label="分区列表">
                    <template v-if="form.zoneQOList">
                        <div v-for="(item,index) in form.zoneQOList" :key="index">
                            <a-row type="flex" justify="space-between">
                                <a-col :span="22">
                                    <a-row>
                                        <a-col span="6">表格名称：</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.zoneName" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">问题列表</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.questionIds" placeholder="选择问题" mode="multiple">
                                                <a-select-option :value="item1.id"
                                                    v-for="(item1,index1) in questionList" :key="index1">
                                                    {{item1.questionTitle}}</a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row>
                                </a-col>
                                <a-col :span="2" class="c">
                                    <a-tooltip>
                                        <template slot="title"> 删除 </template>
                                        <a-icon type="close" style="color: red;font-size: 20px;"
                                            @click="deleteZone(index)" />
                                    </a-tooltip>
                                </a-col>
                            </a-row>
                            <a-divider />
                        </div>
                    </template>

                    <a-button type="primary" @click="addZone">
                        添加分区
                    </a-button>
                </a-form-item>

            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import { message } from 'ant-design-vue';
    import { postTableAdd, postTableUpdate } from "@/services"
    export default {
        props: {
            // 表格状态
            statusList: {
                default: () => { },
                type: Array,
            },
            // 组织列表
            orgList: {
                default: () => { },
                type: Array,
            },
            // 问题
            questionList: {
                default: () => { },
                type: Array,
            },
        },
        data() {
            return {
                // 是否显示弹框
                show: false,
                // 表单
                form: {
                    fileUrl: '',
                    operator: '',
                    tableName: '',
                    tableStatus: '',
                    tableTitle: '',
                    tableType: '',
                    orgIds: undefined,
                    // 分区列表
                    zoneQOList: [
                        // { questionIds: [], zoneName: '' },
                    ]
                }
            }
        },
        methods: {
            /**
             * 删除分区
             */
            deleteZone(index) {
                this.form.zoneQOList.splice(index, 1)
            },
            /**
             * 添加分区
             **/
            addZone() {
                this.form.zoneQOList.push({
                    questionIds: [],
                    zoneName: '',
                })
            },
            /**
             * 打开弹框
             */
            open(data) {
                this.show = true // 打开弹框
                this.form = this.$options.data().form // 初始化
                if (data?.id) {
                    if (data.zoneDTOList.length) {
                        data.zoneQOList = data.zoneDTOList.map(x => {
                            let arr = []
                            x.questionDTOList && x.questionDTOList.map(x1 => x1 && arr.push(x1.id))
                            return {
                                zoneName: x.zoneName,
                                questionIds: arr,
                            }
                        })
                    }
                    this.form = data

                }

            },
            /**
             * 确认提交
             */
            async handleOk() {
                let { form } = this
                if (form.tableName == '') {
                    return message.warning('请填写表格名称')
                }
                if (form.orgIds == '' || form.undefined) {
                    return message.warning('请选择组织')
                }
                // if (form.tableStatus == '') {
                //     return message.warning('请选择表格状态')
                // }
                if (form.id) {
                    let res = await postTableUpdate(this.form)
                    if (res.code == 0) {
                        message.success('修改成功')
                    } else {
                        return message.warning(res?.msg)
                    }
                } else {
                    let res = await postTableAdd(this.form)
                    if (res.code == 0) {
                        message.success('添加成功')
                    } else {
                        return message.warning(res?.msg)
                    }
                }
                this.show = false
                this.$emit('ok', 1);
            }
        },
    }
</script>
<style lang="less">
    .c {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>